//获取数据
data1 = [
  { xu: 1, yong: "小A", zhang: 1562, lian: 2352 },
  { xu: 2, yong: "小B", zhang: 1264, lian: 3562 },
  { xu: 3, yong: "小C", zhang: 1238, lian: 1252 },
  { xu: 4, yong: "小D", zhang: 1598, lian: 5332 },
  { xu: 5, yong: "小E", zhang: 1358, lian: 6542 },
  { xu: 6, yong: "小F", zhang: 4862, lian: 1356 },
  { xu: 7, yong: "小G", zhang: 2457, lian: 2154 },
  { xu: 8, yong: "小H", zhang: 5985, lian: 2124 },
  { xu: 9, yong: "小K", zhang: 6987, lian: 8541 },
  { xu: 10, yong: "小L", zhang: 6523, lian: 7825 },
  { xu: 11, yong: "小M", zhang: 7865, lian: 1364 },
  { xu: 12, yong: "小N", zhang: 4563, lian: 1367 },
  { xu: 13, yong: "小O", zhang: 1685, lian: 7568 },
  { xu: 14, yong: "小P", zhang: 9652, lian: 1235 },
  { xu: 15, yong: "小Q", zhang: 1657, lian: 6952 },
];

//获取元素
var datalist1 = document.getElementById("data-list1");
var leftbutton1 = document.getElementById("leftbutton1");
var rightbutton1 = document.getElementById("rightbutton1");

//定义添加函数
var add2 = function () {
  const tr1 = document.createElement("tr");

  const td1 = document.createElement("td");
  td1.innerHTML = data1[o].xu;
  tr1.appendChild(td1);

  const td2 = document.createElement("td");
  td2.innerHTML = data1[o].yong;
  tr1.appendChild(td2);

  const td3 = document.createElement("td");
  td3.innerHTML = data1[o].zhang;
  tr1.appendChild(td3);

  const td4 = document.createElement("td");
  td4.innerHTML = data1[o].lian;
  tr1.appendChild(td4);

  const td6 = document.createElement("td");
  td6.innerHTML =
    "<button>" + "冻结" + "</button>" + "<button>" + "解冻" + "</button>";
  tr1.appendChild(td6);

  datalist1.appendChild(tr1);
};

//功能实现
//数据数小于页面
if (data1.length < 8) {
  for (var o = 0; o < data1.length; o++) {
    add2();
  }
}
//数据数大于页面，但可取整
else if (data1.length % 8 == 0) {
  //初始化
  for (var o = 0; o < 8; o++) {
    add2();
  }

  //点击上一页
  leftbutton1.onclick = function () {
    if (o > 8) {
      datalist1.innerHTML =
        "<tr>" +
        "<th>" +
        "序号" +
        "</th>" +
        "<th>" +
        "用户名" +
        "</th>" +
        "<th>" +
        "账号" +
        "</th>" +
        "<th>" +
        "联系方式" +
        "</th>" +
        "<th>" +
        "操作" +
        "</th>" +
        "</tr>";
      o = o - 16;
      for (var n = o + 8; o < n; o++) {
        add2();
      }
    } else {
      alert("已到首页");
    }
  };

  //点击下一页
  rightbutton1.onclick = function () {
    if (o < data1.length) {
      datalist1.innerHTML =
        "<tr>" +
        "<th>" +
        "序号" +
        "</th>" +
        "<th>" +
        "用户名" +
        "</th>" +
        "<th>" +
        "账号" +
        "</th>" +
        "<th>" +
        "联系方式" +
        "</th>" +
        "<th>" +
        "操作" +
        "</th>" +
        "</tr>";
      for (var m = o + 8; o < m; o++) {
        add2();
      }
    } else {
      alert("已到尾页");
    }
  };
}
//数据数大于页面，但不可取整
else {
  //初始化
  for (var o = 0; o < 8; o++) {
    add2();
  }

  //点击上一页
  leftbutton1.onclick = function () {
    if (o == data1.length) {
      datalist1.innerHTML =
        "<tr>" +
        "<th>" +
        "序号" +
        "</th>" +
        "<th>" +
        "用户名" +
        "</th>" +
        "<th>" +
        "账号" +
        "</th>" +
        "<th>" +
        "联系方式" +
        "</th>" +
        "<th>" +
        "操作" +
        "</th>" +
        "</tr>";
      o = o - 8 - (data1.length % 8);
      for (var n = o + 8; o < n; o++) {
        add2();
      }
    } else if (o > 8) {
      datalist1.innerHTML =
        "<tr>" +
        "<th>" +
        "序号" +
        "</th>" +
        "<th>" +
        "用户名" +
        "</th>" +
        "<th>" +
        "账号" +
        "</th>" +
        "<th>" +
        "联系方式" +
        "</th>" +
        "<th>" +
        "操作" +
        "</th>" +
        "</tr>";
      o = o - 16;
      for (var n = o + 8; o < n; o++) {
        add2();
      }
    } else {
      alert("已到首页");
    }
  };

  //点击下一页
  rightbutton1.onclick = function () {
    if (data1.length - o == data1.length % 8) {
      datalist1.innerHTML =
        "<tr>" +
        "<th>" +
        "序号" +
        "</th>" +
        "<th>" +
        "用户名" +
        "</th>" +
        "<th>" +
        "账号" +
        "</th>" +
        "<th>" +
        "联系方式" +
        "</th>" +
        "<th>" +
        "操作" +
        "</th>" +
        "</tr>";
      for (var m = data1.length % 8; o - data1.length < m; o++) {
        add2();
      }
    } else if (o == data1.length) {
      alert("已到尾页");
    } else {
      datalist1.innerHTML =
        "<tr>" +
        "<th>" +
        "序号" +
        "</th>" +
        "<th>" +
        "用户名" +
        "</th>" +
        "<th>" +
        "账号" +
        "</th>" +
        "<th>" +
        "联系方式" +
        "</th>" +
        "<th>" +
        "操作" +
        "</th>" +
        "</tr>";
      for (var m = o + 8; o < m; o++) {
        add2();
      }
    }
  };
}
